<template>
  <sv-page>
    <view class="feedback">
      <view class="feedback-type flex align-center margin-bottom-sm">
        反馈类型：
        <view class="sv-uni-data-select flex-sub">
          <uni-data-select
            v-model="fbFrom.feedback_type"
            :localdata="feedback_type_map"
            :disabled="fbFrom.feedback_type == 2"
            @change="changeSelect"
          ></uni-data-select>
        </view>
      </view>
      <!-- 试题错误反馈 - 当反馈类型为试题错误时显示 -->
      <view class="feedback-exam flex margin-bottom-sm" v-if="fbFrom.feedback_type == 2">
        试题纠错：
        <view class="feedback-exam-content flex-sub">
          <view class="flex justify-between">
            <view class="from_lib margin-bottom-xs">题库：{{ buyLibMap[errorExam.from_lib] }}</view>
            <view class="exam_type">
              {{ examConfig.paperTypeDict[errorExam.exam_type] }}
            </view>
          </view>
          <view class="flex margin-bottom-xs">
            题干：
            <rich-text :nodes="errorExam.exam_title"></rich-text>
          </view>
          <view class="flex margin-bottom-xs">
            选项：
            <view>
              <view
                class="exam_option flex align-center margin-bottom-xs"
                v-for="item in errorExam.exam_option"
                :key="item.lable"
              >
                <text decode>{{ item.lable }}.&nbsp;</text>
                <rich-text :nodes="item.value"></rich-text>
              </view>
            </view>
          </view>
          <view class="flex margin-bottom-xs">
            答案：{{ errorExam.exam_answer?.toString() || '--' }}
          </view>
          <view class="flex">
            解析：
            <rich-text :nodes="errorExam.analysis"></rich-text>
          </view>
        </view>
      </view>
      <view class="feedback-title flex align-center margin-bottom-sm">
        反馈标题：
        <view class="sv-uni-easyinput flex-sub">
          <uni-easyinput
            v-model="fbFrom.feedback_title"
            placeholder="请输入反馈标题 (可选)"
          ></uni-easyinput>
        </view>
      </view>
      <view class="feedback-content margin-bottom-sm">
        <view class="margin-bottom-sm">反馈内容：</view>
        <view class="sv-uni-easyinput flex-sub">
          <uni-easyinput
            v-model.trim="fbFrom.feedback_content"
            type="textarea"
            :maxlength="-1"
            placeholder="请输入反馈内容"
          ></uni-easyinput>
        </view>
      </view>
      <!-- 反馈图片上传- 当反馈类型不为试题错误时显示 -->
      <view class="feedback-image margin-bottom-sm" v-if="fbFrom.feedback_type !== 2">
        <view class="margin-bottom-sm">反馈图片：</view>
        <uni-file-picker
          v-model="fbFrom.feedback_image"
          fileMediatype="image"
          mode="grid"
          @select="select"
          @progress="progress"
          @success="success"
          @fail="fail"
        />
      </view>
      <view class="feedback-control flex">
        <button size="mini" type="warn" @click="toBack">返回</button>
        <button size="mini" type="primary" @click="toSubmit">提交反馈</button>
      </view>
    </view>
  </sv-page>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { store } from '@/uni_modules/sv-id-pages/common/store'
import { buyLibList } from '@/service/api/record'
import examConfig from '@/uni_modules/sv-exam/components/sv-exam/config.js'
import { feedbackAdd } from '../../../service/api/feedback'

const { proxy } = getCurrentInstance()

const feedback_type_map = ref([
  { text: '改进建议', value: 0 },
  { text: '发现bug', value: 1 },
  { text: '试题错误', value: 2, disable: true }
])

const errorExam = ref({})
const buyLibMap = ref({})

const fbFrom = ref({
  user_id: store.userInfo._id,
  feedback_id: '',
  feedback_type: 0,
  feedback_title: '',
  feedback_content: '',
  feedback_image: [],
  feedback_status: 0,
  create_date: ''
})

onLoad(() => {
  // 通信通道传值 - 只监听一次
  const eventChannel = proxy.getOpenerEventChannel()
  eventChannel.once('e-transmit-feedback', async (res) => {
    feedback_type_map.value[2].disable = false // 解除禁用
    fbFrom.value.feedback_type = 2
    fbFrom.value.exam_id = res.exam_id
    errorExam.value = res
    await handleInit()
  })
})

async function handleInit() {
  const buyLibRes = await buyLibList({ user_id: store.userInfo._id })
  buyLibMap.value = buyLibRes.data.reduce((acc, cur) => {
    acc[cur.lib_id] = cur.lib_name
    return acc
  }, {})
}

function changeSelect(e) {
  console.log('==== changeSelect :', e)
}

// 图片上传相关
// 获取上传状态
function select(e) {
  console.log('选择文件：', e)
}
// 获取上传进度
function progress(e) {
  console.log('上传进度：', e)
}
// 上传成功
function success(e) {
  console.log('上传成功')
}
// 上传失败
function fail(e) {
  console.log('上传失败：', e)
}

// 返回
function toBack() {
  uni.showModal({
    title: '系统提示',
    content: '反馈内容还未提交，确定退出吗？',
    showCancel: true,
    success: ({ confirm }) => {
      if (confirm) {
        uni.navigateBack()
      }
    }
  })
}
// 提交
function toSubmit() {
  if (fbFrom.value.feedback_content) {
    uni.showModal({
      title: '系统提示',
      content: '确定提交问题反馈吗？',
      cancelText: '再检查一下',
      showCancel: true,
      success: async ({ confirm }) => {
        if (confirm) {
          // 提交反馈单
          fbFrom.value.create_date = Date.now()
          fbFrom.value.feedback_id = `feedback_${store.userInfo._id}_${fbFrom.value.create_date}`
          console.log('==== fbFrom :', fbFrom.value)
          const fbRes = await feedbackAdd(fbFrom.value)
          uni.showToast({
            title: fbRes.message,
            icon: 'none'
          })
        }
      }
    })
  } else {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'error'
    })
  }
}
</script>

<style lang="scss">
.feedback {
  padding: 24rpx;
  box-sizing: border-box;
  position: relative;

  .feedback-exam-content {
    padding: 20rpx;
    border-radius: 10rpx;
    box-sizing: border-box;

    @include useTheme {
      border: 1px solid #{getTheme('sv-border-color')};
      background-color: getTheme('sv-background-highlight-color');

      .exam_option {
        background-color: getTheme('sv-background-color');
        padding: 8rpx 12rpx;
        border-radius: 8rpx;
      }
    }

    .exam_type {
      height: 100%;
      background-color: #01beff;
      color: #ffffff;
      padding: 2rpx 8rpx;
      font-size: 12px;
      border-radius: 8rpx;
    }
  }

  .feedback-control {
    position: fixed;
    bottom: 48rpx;
    width: calc(100% - 48rpx);
  }
}
</style>
